<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_webLogo') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label id="file">
        <img [src]="settings.favicon" class="logo">
        <span style="white-space: nowrap; margin-top: 5px;">
          {{ $t('_updateLogo') }}
        </span>
        <app-upload (onChange)="onLogoChange($event)"></app-upload>
      </label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_title') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <input nz-input formControlName="title" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_webDesc') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <input nz-input formControlName="description" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_keywords') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <input nz-input formControlName="keywords" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_defLanguage') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <nz-select formControlName="language">
        <nz-option nzValue="zh-CN" nzLabel="简体中文"></nz-option>
        <nz-option nzValue="en" nzLabel="English"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_pageLoad') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="loading">
        <label nz-radio nzValue="random">{{ $t('_random') }}</label>
        <label nz-radio nzValue="null">{{ $t('_noSet') }}</label>
        <label
          nz-radio
          nzValue="loading1"
          nz-popover
          [nzPopoverContent]="loading1"
          nzPopoverPlacement="bottom"
        >
          loading1
        </label>
        <ng-template #loading1>
          <img src="assets/img/loading1.png" class="preview" />
        </ng-template>

        <label
          nz-radio
          nzValue="loading2"
          nz-popover
          [nzPopoverContent]="loading2"
          nzPopoverPlacement="bottom"
        >
          loading2
        </label>
        <ng-template #loading2>
          <img src="assets/img/loading2.png" class="preview" />
        </ng-template>

        <label
          nz-radio
          nzValue="loading3"
          nz-popover
          [nzPopoverContent]="loading3"
          nzPopoverPlacement="bottom"
        >
          loading3
        </label>
        <ng-template #loading3>
          <img src="assets/img/loading3.png" class="preview" />
        </ng-template>

        <label
          nz-radio
          nzValue="loading4"
          nz-popover
          [nzPopoverContent]="loading4"
          nzPopoverPlacement="bottom"
        >
          loading4
        </label>
        <ng-template #loading4>
          <img src="assets/img/loading4.png" class="preview" />
        </ng-template>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true" nzRequired>{{ $t('_showGithub') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="showGithub"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true" nzRequired>{{ $t('_showLanguage') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="showLanguage"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true" nzRequired>{{ $t('_defTheme') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="theme">
        <label nz-radio nzValue="Light">
          Light
        </label>
        <label nz-radio nzValue="Sim">
          Sim
        </label>
        <label nz-radio nzValue="Side">
          Side
        </label>
        <label nz-radio nzValue="App">
          App
        </label>
        <label nz-radio nzValue="Shortcut">
          Shortcut
        </label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">百度统计</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <input nz-input formControlName="baiduStatisticsUrl" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">CNZZ统计</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <input nz-input formControlName="cnzzStatisticsUrl" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">IconFont</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <input nz-input formControlName="iconfontUrl" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_footHtml') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <textarea nz-input formControlName="footerContent" [nzAutosize]="{ minRows: 3, maxRows: 5 }"></textarea>
    </nz-form-control>
  </nz-form-item>

  <div class="divider"></div>
  <h2 class="title">Sim {{ $t('_theme') }}</h2>

  <nz-form-item class="sim-ban">
    <nz-form-label [nzSpan]="4" nzRequired>Banner</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-table #basicTable [nzData]="settings.simThemeImages" [nzShowPagination]="false">
        <thead>
          <tr>
            <th>{{ $t('_backgroundImage') }}</th>
            <th>{{ $t('_jumpAddr') }}</th>
            <th>{{ $t('_action') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of settings.simThemeImages; index as idx">
            <td width="260px" class="nowrap">
              <img [src]="data.src" class="icon" />
              <input
                nz-input
                type="text"
                [value]="data.src"
                style="width: 180px;margin-right: 10px;"
                (change)="onChangeSimBannerUrl($event, idx)"
              />
              <app-upload (onChange)="onSimBannerChange($event, idx)"></app-upload>
            </td>
            <td>
              <input
                nz-input
                [value]="data.url"
                maxlength="200"
                (change)="onChangeSimJumpUrl($event, idx)"
              />
            </td>
            <td>
              <a
                nz-popconfirm
                nzPopconfirmPlacement="rightTop"
                nzOkType="danger"
                [nzPopconfirmTitle]="$t('_confirmDel')"
                nzPopconfirmPlacement="bottom"
                *ngIf="settings.simThemeImages.length > 1"
                (nzOnConfirm)="onDeleteSimBanner(idx)"
              >
                <a>
                  {{ $t('_del') }}
                </a>
              </a>
              <a (click)="onAddSimBanner()">{{ $t('_add') }}</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_autoPlay') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <label nz-checkbox formControlName="simThemeAutoplay"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_bannerHeight') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <nz-slider formControlName="simThemeHeight" [nzMin]="100" [nzMax]="1000"></nz-slider>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_desc') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <textarea nz-input formControlName="simThemeDesc" [nzAutosize]="{ minRows: 3, maxRows: 5 }"></textarea>
    </nz-form-control>
  </nz-form-item>

  <div class="divider"></div>
  <h2 class="title">Shortcut {{ $t('_theme') }}</h2>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true" nzRequired>{{ $t('_showWeather') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="shortcutThemeShowWeather"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="sim-ban">
    <nz-form-label [nzSpan]="4">{{ $t('_backgroundImage') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <img [src]="settings.shortcutThemeImages[0].src" />
      <app-upload (onChange)="onShortcutImgChange($event)"></app-upload>
    </nz-form-control>
  </nz-form-item>

  <div class="divider"></div>
  <h2 class="title">Side {{ $t('_theme') }}</h2>

  <nz-form-item class="sim-ban">
    <nz-form-label [nzSpan]="4" nzRequired>Banner</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-table #basicTable [nzData]="settings.sideThemeImages" [nzShowPagination]="false">
        <thead>
          <tr>
            <th>{{ $t('_backgroundImage') }}</th>
            <th>{{ $t('_jumpAddr') }}</th>
            <th>{{ $t('_action') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of settings.sideThemeImages; index as idx">
            <td width="260px" class="nowrap">
              <img [src]="data.src" class="icon" />
              <input
                nz-input
                type="text"
                [value]="data.src"
                style="width: 180px;margin-right: 10px;"
                (change)="onChangeSideBannerUrl($event, idx)"
              />
              <app-upload (onChange)="onSideBannerChange($event, idx)"></app-upload>
            </td>
            <td>
              <input
                nz-input
                [value]="data.url"
                maxlength="200"
                (change)="onChangeSideJumpUrl($event, idx)"
              />
            </td>
            <td>
              <a
                nz-popconfirm
                nzPopconfirmPlacement="rightTop"
                nzOkType="danger"
                [nzPopconfirmTitle]="$t('_confirmDel')"
                nzPopconfirmPlacement="bottom"
                *ngIf="settings.sideThemeImages.length > 1"
                (nzOnConfirm)="onDeleteSideBanner(idx)"
              >
                <a>
                  {{ $t('_del') }}
                </a>
              </a>
              <a (click)="onAddSideBanner()">{{ $t('_add') }}</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_autoPlay') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <label nz-checkbox formControlName="sideThemeAutoplay"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_bannerHeight') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <nz-slider formControlName="sideThemeHeight" [nzMin]="100" [nzMax]="1000"></nz-slider>
    </nz-form-control>
  </nz-form-item>

  <div class="divider"></div>
  <h2 class="title">{{ $t('_mirrorList') }}</h2>

  <nz-form-item class="sim-ban">
    <nz-form-label [nzSpan]="4">{{ $t('_mirrorList') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-table #basicTable [nzData]="settings.mirrorList" [nzShowPagination]="false">
        <thead>
          <tr>
            <th>{{ $t('_mirrorAddr') }}</th>
            <th>{{ $t('_mirrorName') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of settings.mirrorList; index as idx">
            <td width="260px" class="nowrap">
              <input
                nz-input
                type="text"
                [value]="data.url"
                (change)="onChangeMirrorUrl($event, idx)"
                style="width: 180px;margin-right: 10px;"
              />
            </td>
            <td>
              <input
                nz-input
                [value]="data.name"
                maxlength="200"
                (change)="onChangeMirrorName($event, idx)"
              />
            </td>
            <td>
              <a
                nz-popconfirm
                nzPopconfirmPlacement="rightTop"
                nzOkType="danger"
                [nzPopconfirmTitle]="$t('_confirmDel')"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="onDelMirror(idx)"
              >
                <a>
                  {{ $t('_del') }}
                </a>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <a (click)="onAddMirror()">{{ $t('_add') }}</a>
    </nz-form-control>
  </nz-form-item>

  <div class="divider"></div>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
    <nz-form-control [nzSpan]="20">
      <button
        nz-button
        nzType="primary"
        [nzLoading]="submitting"
        (click)="handleSubmit()"
      >
        {{ $t('_save') }}
      </button>

      <p class="save-tip">{{ $t('_setSaveTip') }}</p>
    </nz-form-control>
  </nz-form-item>
</form>


